<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改广告 - 广告')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />

</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-info-edit" th:object="${cstAdInfo}">
            <input name="id" th:field="*{id}" type="hidden">
            <!--<div class="form-group">
                <label class="col-sm-3 control-label">客户端广告记录编号：</label>
                <div class="col-sm-8">
                    <input name="adId" th:field="*{adId}" class="form-control" type="text" required>
                </div>
            </div>-->
            <div class="form-group">    
                <label class="col-sm-3 control-label">广告位position：</label>
                <div class="col-sm-8">
                    <input name="adPos" th:field="*{adPos}" class="form-control" type="text" required>
                </div>
            </div>
            <!--<div class="form-group">
                <label class="col-sm-3 control-label">区域ID：</label>
                <div class="col-sm-8">
                    <input name="areaId" th:field="*{areaId}" class="form-control" type="text" required>
                </div>
            </div>-->
         <!--   <div class="form-group">
                <label class="col-sm-3 control-label">排序：</label>
                <div class="col-sm-8">
                    <input name="seq" th:field="*{seq}" class="form-control" type="text" required>
                </div>
            </div>-->
            <div class="form-group">    
                <label class="col-sm-3 control-label">广告名称：</label>
                <div class="col-sm-8">
                    <input name="title" th:field="*{title}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">摘要：</label>
                <div class="col-sm-8">
                    <input name="description" th:field="*{description}" class="form-control" type="text" required>
                </div>
            </div>
            <!--<div class="form-group">
                <label class="col-sm-3 control-label">图片地址：</label>
                <div class="col-sm-8">
                    <textarea name="iconUrl" class="form-control"  required ><img src="*{iconUrl}" ></textarea>
                </div>
            </div>-->
            <div>
                <img class="photo"  th:src="${#httpServletRequest.getContextPath()}+${cstAdInfo.iconUrl}" height="200px" width="200px">
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <h4 class="form-header h4">跟换图片</h4>
                        <div class="file-loading">
                           <input id="filePath" class="file" type="file"  multiple data-min-file-count="1" data-theme="fas" >
                        </div>
                    </div>
                </div>
            </div>
            <!--
            <div class="form-group">
                <label class="col-sm-3 control-label">图片相关：</label>
                <div class="col-sm-8">
                    <textarea name="image" class="form-control" required>[[*{image}]]</textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">路由跳转地址：</label>
                <div class="col-sm-8">
                    <textarea name="url" class="form-control" required>[[*{url}]]</textarea>
                </div>
            </div>-->
            <div class="form-group">    
                <label class="col-sm-3 control-label">是否是外链，1是。0不是：</label>
                <div class="col-sm-8">
                    <input name="isExt" th:field="*{isExt}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">是否显示头部：</label>
                <div class="col-sm-8">
                    <input name="showTitle" th:field="*{showTitle}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">有效期 开始时间：</label>
                <div class="col-sm-8">
                    <input name="startedAt" th:value="${#dates.format(cstAdInfo.startedAt, 'yyyy-MM-dd')}"  class="form-control" type="text" pattern="yyyy-MM-dd HH:mm:ss" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">有效期 结束时间：</label>
                <div class="col-sm-8">
                    <input name="expiredIn" th:value="${#dates.format(cstAdInfo.expiredIn, 'yyyy-MM-dd')}" class="form-control" type="text"  required>
                </div>
            </div>
           <!-- <div class="form-group">
                <label class="col-sm-3 control-label">状态 1上架; 0下架：</label>
                <div class="col-sm-8">
                    <div class="radio-box">
                        <input type="radio" name="status" value="" required>
                        &lt;!&ndash;<label th:for="status" th:text="未知"></label>&ndash;&gt;
                    </div>
                &lt;!&ndash;    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 代码生成请选择字典属性</span>&ndash;&gt;
                </div>
            </div>-->
           <!-- <div class="form-group">
                <label class="col-sm-3 control-label">修改时间：</label>
                <div class="col-sm-8">
                    <input name="modifiedAt" th:field="*{modifiedAt}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">创建时间：</label>
                <div class="col-sm-8">
                    <input name="createdAt" th:field="*{createdAt}" class="form-control" type="text" required>
                </div>
            </div>-->
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <script type="text/javascript">
        var prefix = ctx + "system/info";

        function uploadFile() {
            var form = $("#form-info-edit")[0];
            var formData = new FormData(form);
            /*formData.append('file', files[0]);*/

            formData.append('file',$('#filePath')[0].files[0]);

            $.ajax({
                url: prefix + "/edit",
                type: 'post',
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function(result) {
                    console.log(result)
                    setTimeout(function(){
                        $.modal.close();
                    },300);
                    var parent = window.parent;
                    parent.$.modal.msgSuccess("操作成功!");
                    parent.$.table.refresh();
                }
            });
        }

        $(document).ready(function(){
            $("#file-loading").fileinput({
                language: 'zh', //设置语言
                dropZoneTitle: '可以将图片拖放到这里 ',
                uploadUrl: "prefix + \"/edit\",", //上传的地址
                uploadExtraData: function(previewId, index) {   //该插件可以向您的服务器方法发送附加数据。这可以通过uploadExtraData在键值对中设置为关联数组对象来完成。所以如果你有设置uploadExtraData={id:'kv-1'}，在PHP中你可以读取这些数据$_POST['id']
                    var id = $('#id').val();
                    return {seriesId: id};
                },

                allowedFileExtensions: ['jpg','png'],//接收的文件后缀
                uploadAsync: true, //默认异步上传
                showUpload: false, //是否显示上传按钮
                showRemove: true, //显示移除按钮
                showPreview: true, //是否显示预览
                showCancel:true,   //是否显示文件上传取消按钮。默认为true。只有在AJAX上传过程中，才会启用和显示
                showCaption: true,//是否显示文件标题，默认为true
                browseClass: "btn btn-primary", //文件选择器/浏览按钮的CSS类。默认为btn btn-primary
                dropZoneEnabled: true,//是否显示拖拽区域
                minImageWidth: 50, //图片的最小宽度
                minImageHeight: 50,//图片的最小高度
                maxImageWidth: 1000,//图片的最大宽度
                maxImageHeight: 1000,//图片的最大高度
                maxFileSize: 1024,//单位为kb，如果为0表示不限制文件大小
                minFileCount: 1, //每次上传允许的最少文件数。如果设置为0，则表示文件数是可选的。默认为0
                maxFileCount: 0, //每次上传允许的最大文件数。如果设置为0，则表示允许的文件数是无限制的。默认为0
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",//当检测到用于预览的不可读文件类型时，将在每个预览文件缩略图中显示的图标。默认为<i class="glyphicon glyphicon-file"></i>
                layoutTemplates:{
                    actionUpload:'',//去除上传预览缩略图中的上传图片
                    actionZoom:'',   //去除上传预览缩略图中的查看详情预览的缩略图标
                    actionDownload:'', //去除上传预览缩略图中的下载图标
                    actionDelete:'', //去除上传预览的缩略图中的删除图标
                },//对象用于渲染布局的每个部分的模板配置。您可以设置以下模板来控制窗口小部件布局.eg:去除上传图标
                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",//字符串，当文件数超过设置的最大计数时显示的消息 maxFileCount。默认为：选择上传的文件数（{n}）超出了允许的最大限制{m}。请重试您的上传！
            }).on('filebatchpreupload', function(event, data) { //该方法将在上传之前触发
                var id = $('#id option:selected').val();
                if(id == 0){
                    return {
                        message: "请选择", // 验证错误信息在上传前要显示。如果设置了这个设置，插件会在调用时自动中止上传，并将其显示为错误消息。您可以使用此属性来读取文件并执行自己的自定义验证
                        data:{} // any other data to send that can be referred in `filecustomerror`
                    };
                }
            });

//fileuploaded此事件仅针对ajax上传触发，并在每个缩略图文件上传完成后触发。此事件仅针对ajax上传并在以下情况下触发：当点击每个预览缩略图中的上传图标并且文件上传成功时，或者当你有 uploadAsync设置为true您已触发批量上传。在这种情况下，fileuploaded每一个人选择的文件被上传成功后，触发事件。
            var id_str = '';
            $('#uploadImg').on('fileuploaded', function(event, data, previewId, index) {
                if(typeof(data.response.id) != 'undefined'){
                    id_str = id_str+data.response.id+',';
                }
            });
// filebatchuploadcomplete此事件仅在ajax上传和完成同步或异步ajax批量上传后触发。
            $('#uploadImg').on('filebatchuploadcomplete',function (event,files,extra) {
                if(id_str.length == 0){
                    layer.msg('上传失败', {icon: 0});//弹框提示
                    return false;
                }
                setTimeout(function(){ //执行延时关闭
                    closeSelf();
                },1000);
            });
        });

        $("#form-info-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                uploadFile();
            }
        }
    </script>
</body>
</html>